<template>
  <div class="scores-management p-6 bg-white rounded-xl shadow-lg w-full max-w-7xl mx-auto">
    <!-- 头部区域 - 弹性布局 -->
    <div>
      <!-- 搜索和过滤区域 - 网格布局 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full" >
        <el-form-item label="班级" style="width: 300px">
          <el-select
              v-model="classId"
              placeholder="选择班级"
              style="width: 100%"
              @change="handleClassChange"
              clearable
          >
            <el-option
                v-for="item in classOptions"
                :key="item.classId"
                :label="item.name"
                :value="item.classId"
            />
          </el-select>
        </el-form-item>

        <!-- 操作按钮 - 弹性布局 -->
        <div class="flex flex-wrap gap-2">
          <el-button type="primary" @click="handleBatchImport" class="flex items-center">
            <i class="fa fa-upload mr-1"></i>批量导入
          </el-button>
          <el-button type="success" @click="handleExport" class="flex items-center">
            <i class="fa fa-download mr-1"></i>导出成绩
          </el-button>
          <el-button type="success" @click="handleBathEdit('2')" class="flex items-center">
            <i class="fa fa-check mr-1"></i>批量通过
          </el-button>
          <el-button type="danger" @click="handleBathEdit('3')" class="flex items-center">
            <i class="fa fa-times mr-1"></i>批量退回
          </el-button>
        </div>
      </div>
    </div>

    <!-- 表格和分页区域 - 弹性布局 -->
    <div class="flex flex-col gap-6">
      <el-table
          :data="tableData"
          height="500px"
          @selection-change="selectedChange"
          border
          class="w-full"
      >
        <el-table-column type="selection"/>
        <el-table-column prop="stuId" label="学号" align="center"/>
        <el-table-column prop="stuName" label="姓名" align="center" />
        <el-table-column prop="className" label="班级" align="center" />
        <el-table-column prop="courseName" label="课程" align="center" />
        <el-table-column prop="type" label="课程性质" align="center" ></el-table-column>
        <el-table-column prop="tempScore" label="成绩" align="center" ></el-table-column>
        <el-table-column prop="status" label="成绩状态" align="center">
            <el-tag :type="'danger'">
              未审核
            </el-tag>
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template #default="scope">
            <el-button type="success" size="small" @click="handleEdit(scope.$index)">通过</el-button>
            <el-button type="danger" size="small" @click="handleReject(scope.$index)">退回</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 - 弹性布局 -->
      <div class="flex justify-center items-center">
        <el-pagination
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="dataLength"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import request from "@/requests/request.js";
import { ElMessage } from "element-plus";

const loading = ref(false);
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const dataLength = ref(20);
const selectedRows = ref([]);
const classOptions = ref([]);
const classId = ref('')

onMounted(async () => {
  request.get('/class/get-all-info').then(res => {
    classOptions.value = res.data.data
  })
  request.get('/score/get-score-by-conditions-admin', {
    params: {
      page: currentPage.value,
      size: 10,
      classId: classId.value,
    }
  }).then(res => {
    tableData.value = res.data.data['data'];
    dataLength.value = res.data.data['total'];
  })
})

const handlePageChange = (page) => {
  currentPage.value = page;
  request.get('/score/get-score-by-conditions-admin', {
    params :{
      page: currentPage.value,
      size: 10,
      classId: classId.value,
    }
  }).then(res => {
    tableData.value = res.data.data['data'];
    dataLength.value = res.data.data['total'];
  })
}

const handleClassChange = (val) => {
  currentPage.value = 1;
  request.get('/score/get-score-by-conditions-admin', {
    params: {
      page: currentPage.value,
      size: 10,
      classId: classId.value,
    }
  }).then(res => {
    tableData.value = res.data.data['data'];
    dataLength.value = res.data.data['total'];
  })
}

const handleEdit = (index) => {
  request.post('/score/update-student-score', {
    studentId: tableData.value[index].stuId,
    courseId: tableData.value[index].courseId,
    status: '2'
  }).then(() => {
    handleClassChange()
  })
}

const handleReject = (index) => {
  request.post('/score/update-student-score', {
    studentId: tableData.value[index].stuId,
    courseId: tableData.value[index].courseId,
    status: '3'
  }).then(() => {
    handleClassChange()
  })
}

const selectList = ref([]);
const selectedChange = (val) => {
  selectList.value = val;
}

const handleBathEdit = (type) => {
  for (let i = 0; i < selectList.value.length; i++) {
    request.post('/score/update-student-score', {
      studentId: selectList.value[i].stuId,
      courseId: selectList.value[i].courseId,
      status: type
    }).then(res => {
      if (res.data.code === 200) {
        request.get('/score/get-score-by-conditions-admin', {
          params: {
            page: currentPage.value,
            size: 10,
            classId: classId.value,
          }
        }).then(res => {
          tableData.value = res.data.data['data'];
          dataLength.value = res.data.data['total'];
        })
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
      }
    })
  }
}
</script>

<style scoped>
/* 移除了固定宽度，改用响应式设计 */
.scores-management {
  /* 基础样式保持不变 */
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  width: 85vw;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 表格样式优化 */
.el-table {
  background-color: white;
  color: #333;
  font-size: 14px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 表头样式优化 */
.el-table th {
  background-color: #f5f7fa;
  font-weight: 600;
}

/* 行悬停效果 */
.el-table .el-table__row:hover {
  background-color: #f5f7fa;
}

/* 按钮图标间距 */
.el-button i {
  margin-right: 4px;
}
</style>
